<style lang="less">
  .special-trace {
    display: flex;
    flex-direction: column;
    .el-tabs__content {
      flex: 1;
      display: flex;
      flex-direction: column;
      .el-tab-pane {
        display: flex;
        flex: 1;
        flex-direction: column;
        .el-table {
          flex: 1;
        }
      }
    }
  }
</style>

<template>
  <el-tabs active-name="first" class="special-trace" @tab-click="handleClick">
    <el-tab-pane label="未完成装车单" name="first">
      <!--工具条-->
      <ue-search-bar empty-text="not_complete组查询条件未配置" ref="ueSearchBar" v-model="searchCondition" :data="querys" label-width="100px">
      </ue-search-bar>
      <!-- 操作 -->
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="inputTracking">录入跟踪
        </el-button>
        <el-button type="primary" @click="specalTraceRester" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchSpecialTrace" style="float: right">查询</el-button>
      </el-col>
      <!-- 专线跟踪  表格-->
      <el-table highlight-current-row border
                :data="specialTraceTableData"
                v-loading="listLoading"
                @current-change="handleCurrentChange"
                height="100%"
                style="width: 100%;">
        <el-table-column type="index" width="55">
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" width="180">
        </el-table-column>
        <el-table-column prop="statusName" label="状态" width="100">
        </el-table-column>
        <el-table-column show-overflow-tooltip fit prop="number" label="装车单号">
          <template slot-scope="scope">
            <el-button type="text" @click="showLoadingList(scope.row)">{{ scope.row.number}}</el-button>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="transportationName" label="运输路线" width="180">
        </el-table-column>
        <el-table-column prop="poll" label="票数" width="80">
        </el-table-column>
        <el-table-column prop="totalWeight" label="件重体" width="200" :formatter="formatterTrunkTasks">
        </el-table-column>
        <el-table-column fixed="right" show-overflow-tooltip prop="plateNumber" label="车牌号码" width="120">
        </el-table-column>
        <el-table-column fixed="right" show-overflow-tooltip prop="driverInfoName" label="司机" width="100">
        </el-table-column>
        <el-table-column fixed="right" prop="driverInfoPhone" label="司机手机" width="140">
        </el-table-column>
        <el-table-column fixed="right" prop="fare" label="车费(元)" width="100">
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="total" style="float: right">
        </el-pagination>
      </el-col>
    </el-tab-pane>
    <el-tab-pane label="历史装车单" name="second">
      <!--工具条-->
      <ue-search-bar empty-text="history组查询条件未配置" ref="historyUeSearchBar" v-model="historySearchCondition" :data="historyQuerys" label-width="100px">
      </ue-search-bar>
      <!-- 操作 -->
      <el-col :span="24" style="margin-bottom: 10px">
        <el-button type="primary" @click="trackingInfo">跟踪记录
        </el-button>
        <el-button type="primary" @click="resetHistorySpecalTrace" style="float: right">重置</el-button>
        <el-button type="primary" @click="searchHistorySpecialTrace" style="float: right">查询</el-button>
      </el-col>
      <!-- 专线跟踪  表格-->
      <el-table highlight-current-row border
                :data="historySpecialTraceTableData"
                v-loading="historyListLoading"
                @current-change="handleHistoryCurrentChange"
                height="100%"
                style="width: 100%;">
        <el-table-column type="index" width="55">
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" width="180">
        </el-table-column>
        <el-table-column prop="statusName" label="状态" width="100">
        </el-table-column>
        <el-table-column show-overflow-tooltip fit prop="number" label="装车单号">
          <template slot-scope="scope">
            <el-button type="text" @click="showLoadingList(scope.row)">{{ scope.row.number}}</el-button>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="transportationName" label="运输路线" width="180">
        </el-table-column>
        <el-table-column prop="poll" label="票数" width="80">
        </el-table-column>
        <el-table-column prop="totalWeight" label="件重体" width="200" :formatter="formatterTrunkTasks">
        </el-table-column>
        <el-table-column fixed="right" show-overflow-tooltip prop="plateNumber" label="车牌号码" width="120">
        </el-table-column>
        <el-table-column fixed="right" show-overflow-tooltip prop="driverInfoName" label="司机" width="100">
        </el-table-column>
        <el-table-column fixed="right" prop="driverInfoPhone" label="司机手机" width="140">
        </el-table-column>
        <el-table-column fixed="right" prop="fare" label="车费(元)" width="100">
        </el-table-column>
      </el-table>
      <el-col :span="24" class="toolbar">
        <el-pagination
          :current-page="historyCurrentPage"
          :page-size="historyPageSize"
          @size-change="handleHistoryPageSizeChange"
          @current-change="handleHistoryCurrentPageChange"
          layout="total,sizes,prev, pager, next, jumper"
          :total="historyTotal" style="float: right">
        </el-pagination>
      </el-col>
    </el-tab-pane>
    <loading-list-detail ref="loadingListDetail"></loading-list-detail>
    <special-track-detail ref="specialTrackDetail" @saveListTraceSuccess="saveListTraceSuccess"></special-track-detail>
  </el-tabs>
</template>

<script>
import { pageLoadingListContentTracks } from '../../api/stowage/LoadingList';
import LoadingListDetail from './LoadingListDetail.vue';
import SpecialTrackDetail from './SpecialTrackDetail.vue';
export default {
  components: {
    LoadingListDetail,
    SpecialTrackDetail
  },
  data () {
    return {
      specialTraceTableData: [],
      listLoading: false,
      searchCondition: {},
      total: 0,
      currentPage: 1,
      pageSize: 10,
      historySpecialTraceTableData: [],
      historyListLoading: false,
      historySearchCondition: {},
      historyTotal: 0,
      historyCurrentPage: 1,
      historyPageSize: 10,
      currentId: '' // 当前选中的ID
    };
  },
  methods: {
    saveListTraceSuccess () {
      this.searchSpecialTrace();
    },
    handleClick (tab, event) {
      if (tab.name === 'second') {
        this.searchHistorySpecialTrace();
      }
    },
    showLoadingList (row) {
      this.$refs.loadingListDetail.show(row);
    },
    trackingInfo () {
      if (this.selectedHistoryLoadingList) {
        this.$refs.specialTrackDetail.show(this.selectedHistoryLoadingList);
      } else {
        this.$message('请选中一条记录');
      }
    },
    inputTracking () {
      if (this.selectedLoadingList) {
        this.$refs.specialTrackDetail.show(this.selectedLoadingList);
      } else {
        this.$message('请选中一条记录');
      }
    },
    handleCurrentChange (val) {
      this.selectedLoadingList = val;
    },
    handleHistoryCurrentChange (val) {
      this.selectedHistoryLoadingList = val;
    },
    formatterTrunkTasks (row) {
      return row.totalAmount + '件/' + row.totalWeight.toFixed(2) + '吨/' + row.totalVolume.toFixed(2) + '方';
    },
    specalTraceRester () {
      this.$refs.ueSearchBar.reset();
    },
    resetHistorySpecalTrace () {
      this.$refs.historyUeSearchBar.reset();
    },
    loadingLists (filter, size, page, fn) {
      pageLoadingListContentTracks({
        filters: filter,
        size: size,
        page: page
      }).then(res => {
        if (res.data.successFlg) {
          fn(res);
        }
      });
    },
    searchSpecialTrace () {
      this.listLoading = true;
      this.loadingLists('IN_status=105007003,105007004,105007005,105007006;' + this.$ue.objToFilter(this.searchCondition),
        this.pageSize,
        this.currentPage,
        res => {
          this.specialTraceTableData = res.data.detailModelList;
          this.total = res.data.totalCount;
          this.listLoading = false;
        });
    },
    searchHistorySpecialTrace () {
      this.historyListLoading = true;
      this.loadingLists('EQ_status=105007007;' + this.$ue.objToFilter(this.historySearchCondition),
        this.historyPageSize,
        this.historyCurrentPage,
        res => {
          this.historySpecialTraceTableData = res.data.detailModelList;
          this.historyTotal = res.data.totalCount;
          this.historyListLoading = false;
        });
    },
    handlePageSizeChange (val) {
      this.pageSize = val;
      this.searchSpecialTrace();
    },
    handleCurrentPageChange (val) {
      this.currentPage = val;
      this.searchSpecialTrace();
    },
    handleHistoryPageSizeChange (val) {
      this.historyPageSize = val;
      this.searchHistorySpecialTrace();
    },
    handleHistoryCurrentPageChange (val) {
      this.historyCurrentPage = val;
      this.searchHistorySpecialTrace();
    }
  },
  computed: {
    btns () {
      return this.$store.state.btns[this.$route.path] || [];
    },
    querys () {
      return this.$store.state.querys[this.$route.path + '#not_complete'] || [];
    },
    historyQuerys () {
      return this.$store.state.querys[this.$route.path + '#history'] || [];
    }
  },
  mounted () {
    this.$store.commit('initDict');
    this.searchSpecialTrace();
    this.searchHistorySpecialTrace();
  }
};
</script>
